import React,{useEffect, useState} from "react";
import { Button, Modal,Radio,Form,Input,Upload,message } from "antd";
import { PlusOutlined,LoadingOutlined } from '@ant-design/icons';
import { update } from "../../../services/student";
import {useSelector,useDispatch} from 'react-redux';
import { setUpdateVisible } from "../../../store/slices/studentSlice";
import { url } from "../../../services";
export default function Update({show}) {
    const [form] = Form.useForm();
    let {updateVisible,student} = useSelector(state => state.student);
    const [loading, setLoading] = useState(false);
    const [imageUrl, setImageUrl] = useState();
    let dispatch = useDispatch();
    const handleOk = async () => {
        await update({_id:student._id,...form.getFieldsValue()});
        show();
        dispatch(setUpdateVisible(false));
    };

    const handleCancel = () => {
        dispatch(setUpdateVisible(false));
    };
    const getBase64 = (img, callback) => {
        const reader = new FileReader();
        reader.addEventListener("load", () => callback(reader.result));
        reader.readAsDataURL(img);
    };

    const uploadButton = (
        <div>
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div
                style={{
                    marginTop: 8,
                }}
            >
                Upload
            </div>
        </div>
    );
    const beforeUpload = (file) => {
        const isJpgOrPng =
            file.type === "image/jpeg" || file.type === "image/png";

        if (!isJpgOrPng) {
            message.error("You can only upload JPG/PNG file!");
        }
        // const isLt2M = file.size / 1024 / 1024 < 2;

        // if (!isLt2M) {
        //   message.error('Image must smaller than 2MB!');
        // }
        return isJpgOrPng;
    };
    const handleChange = (info) => {
        if (info.file.status === "uploading") {
            setLoading(true);
            return;
        }

        if (info.file.status === "done") {
            console.log("info",info.file.response.filename);
            form.setFieldsValue({...form.getFieldsValue(),headImg:info.file.response.filename});
           console.log("form",form.getFieldValue());
            // Get this url from response in real world.
            getBase64(info.file.originFileObj, (url) => {
                setLoading(false);
                setImageUrl(url);
            });
        }
    };

    useEffect(() => {
        form.setFieldsValue(student);
        setImageUrl(url + "/images/" + student.headImg);
    },[student._id])
    return (
        <div>
           
            <Modal
                title="修改学生"
                visible={updateVisible}
                onOk={handleOk}
                onCancel={handleCancel}
            >
                <Form
                    name="addForm"
                    form={form}
                    labelCol={{
                        span: 4,
                    }}
                    wrapperCol={{
                        span: 20,
                    }}
                    autoComplete="off"
                >
                    <Form.Item name="headImg" label="上传">
                        <Upload
                            name="file"
                            listType="picture-card"
                            className="avatar-uploader"
                            showUploadList={false}
                            action={url + "/upload"}
                            beforeUpload={beforeUpload}
                            onChange={handleChange}
                        >
                            {imageUrl ? (
                                <img
                                    src={imageUrl}
                                    alt="avatar"
                                    style={{ width: "100%" }}
                                />
                            ) : (
                                uploadButton
                            )}
                        </Upload>
                    
                    </Form.Item>
                    <Form.Item
                        label="姓名"
                        name="name"
                        hasFeedback
                        rules={[
                            {
                                required: true,
                                message: "姓名不能为空",
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="年龄"
                        name="age"
                        hasFeedback
                        rules={[
                            {
                                required: true,
                                message: "年龄不能为空",
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="性别"
                        name="gender"
                        hasFeedback
                        rules={[
                            {
                                required: true,
                                message: "性别不能为空",
                            },
                        ]}
                    >
                        <Radio.Group>
                            <Radio value="男">男</Radio>
                            <Radio value="女">女</Radio>
                        </Radio.Group>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
}
